<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="searchForm.account" placeholder="输入卡号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="loading" class="content-container">
      <!--列表-->
      <el-table size="small" @selection-change="selectChange" :data="scoreData" :height="height" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" type="selection" width="50"></el-table-column>
        <el-table-column type="index" width="50" label="序号" :index="tableIndex"> </el-table-column>
        <el-table-column align="center" sortable prop="user.account" label="卡号" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="user.name" label="姓名" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="score" label="评估分数" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="result" label="评估结果" ></el-table-column>
        <el-table-column align="center" sortable prop="nutrition" label="营养指导" ></el-table-column>
        <el-table-column align="center" sortable prop="support" label="运动建议" ></el-table-column>
        <el-table-column align="center" sortable prop="way" label="用药方案" ></el-table-column>
        <el-table-column align="center" label="操作" width="100" >
          <template slot-scope="scope">
            <el-button size="mini" :disabled="showButton" @click="editPage(scope.$index, scope.row)">干预</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <Pagination v-bind:pager="pager" @refreshPage="refreshPage"></Pagination>

      <!--表单-->
      <el-dialog :title="operateType == 'add' ? '新增健康干预' : '修改健康干预'" :visible.sync="showForm" width="50%" @click="closeDialog()">
        <TableEdit ref="editForm" v-if="showForm" :formData="formData" @closeDialog="closeDialog"></TableEdit>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog()">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" @click="submitForm()">确定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import TableEdit from './edit'
import {getPageData, deleteData} from '@/api/assess'
import store from '@/store'

// 分页
const pager = {
  currentPage: 1,
  pageSize: 20,
  total: 20
}
// 请求数据用户
const searchForm = {
  currentPage: 1,
  pageSize: 20,
  userId: '',
  account: ''
}
// 表单属性
const formData = {
  id: '',
  account: '',
  userId: '',
  createDate: '',
  score: '',
  result: '',
  createId: '',
  nutrition: '',
  support: '',
  way: ''
}
export default {
  name: 'MeddleList',
  data () {
    return {
      loading: false,
      showForm: false,
      height: document.documentElement.clientHeight - 230,
      selectData: [],
      searchForm: searchForm,
      pager: pager,
      scoreData: [],
      showButton: true,
      operateType: '',
      formData: formData
    }
  },
  // 注册组件
  components: {
    Pagination, TableEdit
  },
  created () {
    if("管理员" == store.getters.roles) {
      this.showButton = false
    }
    this.getDataList(this.searchForm)
  },
  methods: {
    // 序号续编
    tableIndex (index) {
      return ((this.pager.currentPage - 1) * this.pager.pageSize + index + 1)
    },
    // 查询数据
    searchData () {
      this.getDataList(this.searchForm)
    },
    // 获取数据
    getDataList (parameter) {
      this.loading = true
      getPageData(parameter).then(res => {
        this.loading = false
        this.pager.currentPage = res.body.current
        this.pager.pageSize = res.body.size
        this.pager.total = res.body.total
        this.searchForm.pageSize = res.body.size
        this.scoreData = res.body.records
      })
    },
    // 选择复选框事件
    selectChange (val) {
      this.selectData = val
    },
    // 分页插件事件
    refreshPage (param) {
      this.searchForm.currentPage = param.currentPage
      this.searchForm.pageSize = param.pageSize
      this.getDataList(this.searchForm)
    },
    // 显示编辑界面
    addPage () {
      this.operateType = 'add'
      this.showForm = true
      this.formData.id = ''
      this.formData.account = ''
      this.formData.userId = '11'
      this.formData.score = ''
      this.formData.createDate = ''
    },
    // 显示编辑界面
    editPage (index, row) {
      this.operateType = 'edit'
      this.showForm = true
      this.formData.id = row.id
      this.formData.account = row.user.account
      this.formData.userId = row.userId
      this.formData.score = row.score
      this.formData.createDate = row.createDate
      this.formData.result = row.result
      this.formData.createId = row.createId
      this.formData.nutrition = row.nutrition
      this.formData.support = row.support
      this.formData.way = row.way
    },
    closeDialog () {
      this.showForm = false
      this.$refs.editForm.clearForm()
      this.searchData()
    },
    // 表单保存事件
    submitForm () {
      this.$refs.editForm.submitForm()
    },
    // 删除
    deletePage (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteData(row.id).then(res => {
          if (res.message == "success" ) {
            this.getDataList(this.searchForm)
            this.$message({
              type: 'success',
              message: "删除成功！"
            })
          } else {
            this.$message({
              type: 'score',
              message: res.message
            })
          }
        })
      })
    }

  }
}
</script>

<style scoped>
</style>
